import type { PickerColumn, PickerColumnOption } from 'react-vant'
import { ContacCiie, Log } from '@/api'
import Bg from '@/assets/bg-2.jpg'
import FormContentBg1 from '@/assets/bg-3.png'
import FormContentBg2 from '@/assets/bg-4.png'
import Button from '@/assets/button-2.png'
import Kang from '@/assets/kang-2.png'

import Logo from '@/assets/logo.png'

import { XyzTransitionGroup } from '@animxyz/react'
import { useSetState } from 'ahooks'

import dayjs from 'dayjs'
import React, { useMemo, useState } from 'react'
import { DatetimePicker, Field, Picker, Toast } from 'react-vant'
import { history, useMutation } from 'umi'
import CityJson from './city.json'
import '@animxyz/core'

// 省份
const provinceColumns = [
  ...CityJson,
]

export default function FormPage() {
  const [formValues, setFormValues] = useSetState<{
    province: string | undefined
    city: string | undefined
    cityCode: string | undefined
    date: string | undefined
  }>({
    province: undefined,
    city: undefined,
    cityCode: undefined,
    date: dayjs().format('YYYY-MM-DD'),
  })

  // #提交表单
  const { mutateAsync } = useMutation({
    mutationFn: ContacCiie,
  })

  // 城市
  const cityColumns = useMemo(() => CityJson.find(i => i.text === formValues.province)?.child || [], [formValues.province])

  async function handleSubmit() {
    if (!formValues.province)
      return Toast.fail('请选择省')
    if (!formValues.cityCode)
      return Toast.fail('请选择市')

    if (!formValues.date)
      return Toast.fail('请选择日期')

    const t = Toast.loading('提交中...')

    const { id } = await mutateAsync({
      adcode: formValues.cityCode,
      date: formValues.date,
    })
    t.clear()

    if (!id)
      return false

    history.replace(`/rending?id=${id}&city=${formValues.city}`)
  }
  return (
    <XyzTransitionGroup
      appear
      appearVisible
      duration="auto"
      xyz="fade small-4 appear-stagger"
      className="flex flex-col items-center min-h-screen bg-bottom bg-no-repeat bg-cover pt-[120px]"
      style={{
        backgroundImage: `url(${Bg})`,
      }}
    >
      <i
        className="w-[406px] h-[136px] bg-cover block"
        style={{
          backgroundImage: `url(${Logo})`,
        }}
      >
      </i>

      {/* form content 1  */}
      <div
        className="w-[812px] h-[484px] mt-4 bg-cover translate-x-[-10px] relative pt-[198px] pr-[100px]"
        style={{
          'backgroundImage': `url(${FormContentBg1})`,
          '--rv-cell-vertical-padding': '0.5vh',
          '--rv-cell-horizontal-padding': '0.5vh',
        } as React.CSSProperties}
      >
        <Picker
          className="select-none"
          itemHeight="15vh"
          popup={{
            round: true,
          }}
          title="请选择省"
          columns={provinceColumns}
          onConfirm={(value: string) => {
            setFormValues({
              province: value,
              city: undefined,
              cityCode: undefined,
            })
          }}
        >
          {(val: string | string[], _, actions) => {
            return (
              <div className="pl-[230px]">
                <Field value={formValues.province} isLink align="right" className="rounded-2xl" readOnly clickable placeholder="请选择城市" onClick={() => actions.open()} />
              </div>
            )
          }}
        </Picker>

        {/* 选择城市 */}
        <Picker
          className="select-none"
          itemHeight="15vh"
          popup={{
            round: true,
          }}
          title="请选择市"
          columns={cityColumns}
          onConfirm={(value: string, source: PickerColumnOption) => {
            setFormValues({
              city: source.text as string,
              cityCode: value,
            })
          }}
        >
          {(_val: string | string[], _, actions) => {
            return (
              <div className="pl-[230px] mt-[34px]">
                <Field
                  isLink
                  align="right"
                  value={formValues.city}
                  className="rounded-2xl"
                  readOnly
                  clickable
                  placeholder="请选择城市"
                  onClick={() => actions.open()}
                />
              </div>
            )
          }}
        </Picker>
      </div>

      {/* form content 2  */}
      <div
        className="w-[818px] h-[484px] mt-4 bg-cover translate-x-[14px] pl-[100px] pr-[134px] pt-[200px]"
        style={{
          backgroundImage: `url(${FormContentBg2})`,
        }}
      >
        <DatetimePicker
          visibleItemCount={3}
          itemHeight="5vh"
          value={dayjs(formValues.date).toDate()}
          className="h-[calc(100%-40px)] overflow-hidden rounded-2xl"
          type="date"
          showToolbar={false}
          minDate={dayjs().toDate()}
          maxDate={dayjs().add(89, 'd').toDate()}

          formatter={(type: string, val: string) => {
            if (type === 'year') {
              return `${val}年`
            }
            if (type === 'month') {
              return `${val}月`
            }
            if (type === 'day') {
              return `${val}日`
            }
            return val
          }}

          onChange={(e: Date) => setFormValues({ date: dayjs(e).format('YYYY-MM-DD') })}
        />
      </div>

      {/* kang */}
      <i
        className="w-[336px] h-[404px] bg-cover absolute left-[40px] bottom-[80px]"
        style={{
          backgroundImage: `url(${Kang})`,
        }}
      >
      </i>
      <button
        type="button"
        onClick={() => {
          handleSubmit()
          Log({ eventName: '点击提交' })
        }}
        className=" active:scale-95 w-[670px] -ml-[calc(670px/2)] h-[150px] bg-cover absolute bottom-[130px] left-1/2"
        style={{
          backgroundImage: `url(${Button})`,
        }}
      />

    </XyzTransitionGroup>
  )
}
